<template>
	<view class="category-manage">
		<!-- 类型切换 -->
		<view class="type-tabs">
			<view 
				class="type-tab" 
				:class="{ active: currentType === '支出' }"
				@tap="changeType('支出')"
			>
				<text class="type-text">支出分类</text>
			</view>
			<view 
				class="type-tab" 
				:class="{ active: currentType === '收入' }"
				@tap="changeType('收入')"
			>
				<text class="type-text">收入分类</text>
			</view>
		</view>

		<!-- 分类列表 -->
		<view class="category-list">
			<view class="section">
				<view class="section-title">系统分类</view>
				<view class="category-grid">
					<view 
						v-for="item in systemCategories" 
						:key="item._id"
						class="category-card system"
					>
						<view class="category-icon">
							<text class="iconfont" :class="item.icon || 'icon-qita'"></text>
						</view>
						<text class="category-name">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="section" v-if="customCategories.length > 0">
				<view class="section-title">自定义分类</view>
				<view class="category-grid">
					<view 
						v-for="item in customCategories" 
						:key="item._id"
						class="category-card custom"
						@longpress="showOptions(item)"
					>
						<view class="category-icon">
							<text class="iconfont" :class="item.icon || 'icon-qita'"></text>
						</view>
						<text class="category-name">{{ item.name }}</text>
						<view class="delete-icon" @tap.stop="deleteCategory(item)">
							<text>×</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 悬浮添加按钮 -->
		<view class="fab" @tap="showAddDialog">
			<text class="fab-icon">+</text>
		</view>

		<!-- 添加分类弹窗 -->
		<uni-popup ref="addPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">添加自定义分类</view>
				
				<view class="popup-form">
					<view class="form-item">
						<text class="form-label">分类名称</text>
						<input 
							class="form-input" 
							v-model="newCategory.name" 
							placeholder="请输入分类名称"
							maxlength="10"
						/>
					</view>
					
					<view class="form-item">
						<text class="form-label">选择图标</text>
						<scroll-view class="icon-list" scroll-x>
							<view 
								v-for="(icon, index) in iconList" 
								:key="index"
								class="icon-item"
								:class="{ active: newCategory.icon === icon }"
								@tap="selectIcon(icon)"
							>
								<text class="iconfont" :class="icon"></text>
							</view>
						</scroll-view>
					</view>
				</view>
				
				<view class="popup-footer">
					<button class="popup-btn cancel" @tap="closeAddDialog">取消</button>
					<button class="popup-btn confirm" @tap="addCategory">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentType: '支出',
			categories: [],
			newCategory: {
				name: '',
				icon: ''
			},
			iconList: [
				'icon-canyin',
				'icon-jiaotong',
				'icon-gouwu',
				'icon-yule',
				'icon-yiliao',
				'icon-juzhu',
				'icon-tongxun',
				'icon-xuexi',
				'icon-gongzi',
				'icon-jiangjin',
				'icon-licai',
				'icon-jianzhi',
				'icon-qita'
			]
		}
	},
	computed: {
		// 系统分类
		systemCategories() {
			return this.categories.filter(item => !item.user_id)
		},
		// 自定义分类
		customCategories() {
			return this.categories.filter(item => item.user_id)
		}
	},
	onLoad(options) {
		if (options.type) {
			this.currentType = options.type
		}
		this.loadCategories()
	},
	methods: {
		// 加载分类列表
		async loadCategories() {
			try {
				const categoryObj = uniCloud.importObject('category')
				const res = await categoryObj.listCategories({
					type: this.currentType
				})
				
				if (res.code === 0) {
					this.categories = res.data
				}
			} catch (e) {
				console.error('加载分类失败', e)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		
		// 切换类型
		changeType(type) {
			this.currentType = type
			this.loadCategories()
		},
		
		// 显示添加弹窗
		showAddDialog() {
			this.newCategory = {
				name: '',
				icon: this.iconList[0]
			}
			this.$refs.addPopup.open()
		},
		
		// 关闭添加弹窗
		closeAddDialog() {
			this.$refs.addPopup.close()
		},
		
		// 选择图标
		selectIcon(icon) {
			this.newCategory.icon = icon
		},
		
		// 添加分类
		async addCategory() {
			if (!this.newCategory.name) {
				uni.showToast({
					title: '请输入分类名称',
					icon: 'none'
				})
				return
			}
			
			try {
				const categoryObj = uniCloud.importObject('category')
				const res = await categoryObj.addCategory({
					name: this.newCategory.name,
					type: this.currentType,
					icon: this.newCategory.icon
				})
				
				if (res.code === 0) {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					this.closeAddDialog()
					this.loadCategories()
				} else {
					uni.showToast({
						title: res.msg || '添加失败',
						icon: 'none'
					})
				}
			} catch (e) {
				console.error('添加分类失败', e)
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				})
			}
		},
		
		// 显示操作选项
		showOptions(item) {
			uni.showActionSheet({
				itemList: ['编辑', '删除'],
				success: (res) => {
					if (res.tapIndex === 0) {
						this.editCategory(item)
					} else if (res.tapIndex === 1) {
						this.deleteCategory(item)
					}
				}
			})
		},
		
		// 编辑分类（暂时简化，只支持删除）
		editCategory(item) {
			uni.showToast({
				title: '编辑功能开发中',
				icon: 'none'
			})
		},
		
		// 删除分类
		async deleteCategory(item) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个分类吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const categoryObj = uniCloud.importObject('category')
							const result = await categoryObj.deleteCategory(item._id)
							
							if (result.code === 0) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								this.loadCategories()
							} else {
								uni.showToast({
									title: result.msg || '删除失败',
									icon: 'none'
								})
							}
						} catch (e) {
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.category-manage {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 类型切换 */
.type-tabs {
	display: flex;
	background-color: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.type-tab {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	border-radius: 12rpx;
	transition: all 0.3s;
}

.type-tab.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.type-text {
	font-size: 28rpx;
	color: #666;
}

.type-tab.active .type-text {
	color: #fff;
	font-weight: bold;
}

/* 分类列表 */
.category-list {
	padding: 0 20rpx;
}

.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 20rpx;
	padding-left: 10rpx;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.category-card {
	position: relative;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.category-card.custom {
	background: linear-gradient(135deg, #fff 0%, #f8f8ff 100%);
}

.category-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}

.category-icon .iconfont {
	font-size: 40rpx;
	color: #fff;
}

.category-name {
	font-size: 24rpx;
	color: #333;
	text-align: center;
}

.delete-icon {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background-color: #ff4d4f;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

/* 悬浮按钮 */
.fab {
	position: fixed;
	right: 30rpx;
	bottom: 100rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.fab-icon {
	font-size: 60rpx;
	color: #fff;
	font-weight: 300;
}

/* 弹窗样式 */
.popup-content {
	width: 600rpx;
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}

.popup-title {
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	padding: 40rpx 20rpx 20rpx;
	color: #333;
}

.popup-form {
	padding: 20rpx 40rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.form-input {
	width: 100%;
	height: 80rpx;
	border: 1px solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.icon-list {
	white-space: nowrap;
	padding: 10rpx 0;
}

.icon-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #f5f5f5;
	margin-right: 20rpx;
	transition: all 0.3s;
}

.icon-item.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon-item .iconfont {
	font-size: 40rpx;
	color: #999;
}

.icon-item.active .iconfont {
	color: #fff;
}

.popup-footer {
	display: flex;
	border-top: 1px solid #f0f0f0;
}

.popup-btn {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-size: 28rpx;
	border: none;
	border-radius: 0;
	background-color: #fff;
}

.popup-btn.cancel {
	color: #999;
	border-right: 1px solid #f0f0f0;
}

.popup-btn.confirm {
	color: #667eea;
	font-weight: bold;
}
</style>

